<template>
  <div class="vehicle-page">
    <!-- 内容区域 -->
    <div class="content-wrapper">
      <!-- 有车辆数据时显示列表 -->
      <div v-if="vehicleList.length > 0" class="vehicle-list">
        <div 
          v-for="(vehicle, index) in vehicleList" 
          :key="index" 
          class="vehicle-card"
        >
          <!-- 第一行：车辆图片和信息 -->
          <div class="vehicle-main">
            <!-- 车辆图片 -->
            <div class="vehicle-image">
              <img 
                src="@/static/mycar-img/奔驰图片.jpg" 
                alt="车辆图片" 
                class="car-photo"
              >
            </div>
            
            <!-- 车辆信息 -->
            <div class="vehicle-info">
              <div class="vehicle-model">车型: {{ vehicle.model }}</div>
              <div class="vehicle-plate">车牌: {{ vehicle.plateNumber }}</div>
            </div>
          </div>
          
          <!-- 分割线 -->
          <div class="divider"></div>
          
          <!-- 第二行：操作区域 -->
          <div class="vehicle-actions">
            <div class="default-section">
              <div 
                class="default-indicator" 
                :class="{ 'active': vehicle.isDefault }"
                @click="setDefaultVehicle(index)"
              ></div>
              <span class="default-text">设为默认车辆</span>
            </div>
            <button class="delete-btn" @click="deleteVehicle(index)">删除</button>
          </div>
        </div>
      </div>
      
      <!-- 无车辆数据时显示空状态 -->
      <div v-else class="empty-state">
        <!-- 车辆插图 -->
        <div class="car-illustration">
          <img 
            src="@/static/mycar-img/组 4.png" 
            alt="车辆插图" 
            class="car-img"
          >
        </div>
        <!-- 提示文字 -->
        <p class="empty-text">暂无车辆信息</p>
      </div>
    </div>

    <!-- 添加车辆按钮：底部固定 -->
    <div class="bottom-action">
      <button class="add-vehicle-btn" @click="handleAddVehicle">
        <span class="plus-icon">+</span>
        <span class="btn-text">添加车辆</span>
      </button>
    </div>
  </div>
</template>

<script>
// Vue2 选项式API：适配UniApp多端
export default {
  name: 'MyVehiclePage',
  data() {
    return {
      vehicleList: [
        {
          id: 1,
          model: '奔驰-GR',
          plateNumber: '豫M35468',
          isDefault: true
        },
        {
          id: 2,
          model: '奔驰-GR',
          plateNumber: '豫M35422',
          isDefault: false
        }
      ] // 模拟车辆数据
    }
  },
  methods: {
    // 添加车辆：跳转到添加车辆页面
    handleAddVehicle() {
      uni.navigateTo({
        url: '/my-item/mycar/addcar',
        fail: (err) => {
          console.error('跳转失败：', err);
          uni.showToast({ title: '页面跳转失败', icon: 'none' });
        }
      });
    },

    // 设置默认车辆
    setDefaultVehicle(index) {
      // 先将所有车辆设为非默认
      this.vehicleList.forEach(vehicle => {
        vehicle.isDefault = false;
      });
      // 设置当前车辆为默认
      this.vehicleList[index].isDefault = true;
      
      uni.showToast({
        title: '已设为默认车辆',
        icon: 'success'
      });
    },

    // 删除车辆
    deleteVehicle(index) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这辆车吗？',
        success: (res) => {
          if (res.confirm) {
            this.vehicleList.splice(index, 1);
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            });
          }
        }
      });
    }
  },
  // 页面加载时：可扩展接口请求
  onLoad(options) {
    console.log('页面加载参数：', options);
    
    // 示例：调用接口获取车辆列表（后续替换为真实接口）
    // this.getVehicleData();
  },
  
  computed: {
    // 判断是否有车辆数据（后续渲染列表用）
    hasVehicle() {
      return this.vehicleList.length > 0;
    }
  }
}
</script>

<style scoped>
/* 页面全局样式：flex纵向布局，占满屏幕 */
.vehicle-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 内容区域 */
.content-wrapper {
  flex: 1;
  padding: 40rpx;
  background-color: #f5f5f5;
  overflow-y: auto;
}

/* 车辆列表 */
.vehicle-list {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

/* 车辆卡片 */
.vehicle-card {
  background-color: #ffffff;
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

/* 第一行：车辆图片和信息 */
.vehicle-main {
  display: flex;
  align-items: center;
  gap: 32rpx;
}

/* 车辆图片 */
.vehicle-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.car-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 车辆信息 */
.vehicle-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.vehicle-model {
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
}

.vehicle-plate {
  font-size: 28rpx;
  color: #666666;
}

/* 分割线 */
.divider {
  height: 2rpx;
  background-color: #E5E5EA;
}

/* 操作区域 */
.vehicle-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: auto;
  height: auto;
}

.default-section {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  height: auto;
  line-height: 1;
}

.default-indicator {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  border: 4rpx solid #CCCCCC;
  background-color: transparent;
  transition: all 0.2s;
  flex-shrink: 0;
}

.default-indicator.active {
  background-color: #FF3B30;
  border-color: #FF3B30;
}

.default-text {
  font-size: 24rpx;
  color: #666666;
  line-height: 1;
  height: auto;
}

.delete-btn {
  background-color: transparent;
  border: none;
  color: #FF3B30;
  font-size: 28rpx;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: color 0.2s;
  line-height: 1;
  height: auto;
  text-decoration: none;
}

.delete-btn:active {
  color: #E02E24;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 520rpx;
  margin: 0 auto;
  padding: 120rpx 40rpx;
}

.car-illustration {
  margin-bottom: 40rpx;
  display: flex;
  justify-content: center;
}

.car-img {
  width: 360rpx;
  height: 252rpx;
  object-fit: contain;
  filter: drop-shadow(0 6rpx 12rpx rgba(0, 0, 0, 0.08));
}

.empty-text {
  font-size: 30rpx;
  color: #8E8E93;
  margin: 0;
  font-weight: 400;
  line-height: 1.3;
}

/* 底部操作区域 */
.bottom-action {
  padding: 32rpx 40rpx;
  background-color: #ffffff;
  border-top: 2rpx solid #E5E5EA;
}

/* 添加车辆按钮：底部固定，蓝色背景 */
.add-vehicle-btn {
  width: 100%;
  padding: 24rpx;
  background-color: #007AFF;
  color: #ffffff;
  border: none;
  border-radius: 20rpx;
  font-size: 32rpx;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.25);
}

.add-vehicle-btn:active {
  background-color: #0056CC;
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.3);
}

.plus-icon {
  font-size: 32rpx;
  font-weight: bold;
}

.btn-text {
  font-size: 32rpx;
  font-weight: 500;
}

/* 响应式适配 */
@media (max-width: 375px) {
  .car-img {
    width: 320rpx;
    height: 224rpx;
  }
  
  .empty-text {
    font-size: 28rpx;
  }
  
  .add-vehicle-btn {
    padding: 20rpx;
    font-size: 30rpx;
  }
}

@media (min-width: 414px) {
  .car-img {
    width: 400rpx;
    height: 280rpx;
  }
  
  .empty-text {
    font-size: 32rpx;
  }
}
</style>
    